﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Customize Fill</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 100px;
            margin-right: 12px;
            text-align:right;
        }

        input[type="text"] {
            width: 130px;
        }

        select {
            width: 134px;
        }

        input[type="button"] {
            width: 134px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 2 });
            initSpread(spread);
        });

        function initSpread(spread) {
            var sheet = spread.getSheet(0);

            $("#fillDirectionSet").hide();
            $("#fillDateUnitSet").hide();
            $("#fillStepAndStop").hide();
            $("#btnFillAutobyDirection").hide();
            $("#btnFillLinear").hide();
            $("#btnFillGrowth").hide();
            $("#btnFillDate").hide();
            $("#fillMethods").change(function() {
                switch ($("#fillMethods").val()) {
                    case '0':
                        $("#fillSeriesSet").show();
                        $("#btnFillAuto").show();
                        $("#fillDateUnitSet").hide();
                        $("#fillDirectionSet").hide();
                        $("#btnFillDateUnit").hide();
                        $("#btnFillAutobyDirection").hide();
                        $("#btnFillLinear").hide();
                        $("#btnFillGrowth").hide();
                        $("#btnFillDate").hide();
                        $("#fillStepAndStop").hide();
                        break;
                    case '1':
                        $("#fillDirectionSet").show();
                        $("#btnFillAutobyDirection").show();
                        $("#fillDateUnitSet").hide();
                        $("#fillSeriesSet").hide();
                        $("#btnFillAuto").hide();
                        $("#btnFillDateUnit").hide();
                        $("#btnFillLinear").hide();
                        $("#btnFillGrowth").hide();
                        $("#btnFillDate").hide();
                        $("#fillStepAndStop").hide();
                        break;
                    case '2':
                        $("#fillSeriesSet").show();
                        $("#btnFillLinear").show();
                        $("#fillStepAndStop").show();
                        $("#fillDateUnitSet").hide();
                        $("#fillDirectionSet").hide();
                        $("#btnFillAuto").hide();
                        $("#btnFillDateUnit").hide();
                        $("#btnFillAutobyDirection").hide();
                        $("#btnFillGrowth").hide();
                        $("#btnFillDate").hide();
                        break;
                    case '3':
                        $("#fillSeriesSet").show();
                        $("#btnFillGrowth").show();
                        $("#fillStepAndStop").show();
                        $("#fillDateUnitSet").hide();
                        $("#fillDirectionSet").hide();
                        $("#btnFillAuto").hide();
                        $("#btnFillDateUnit").hide();
                        $("#btnFillAutobyDirection").hide();
                        $("#btnFillLinear").hide();
                        $("#btnFillDate").hide();
                        break;
                    case '4':
                        $("#fillSeriesSet").show();
                        $("#btnFillDate").show();
                        $("#fillStepAndStop").show();
                        $("#fillDateUnitSet").show();
                        $("#fillDirectionSet").hide();
                        $("#btnFillAuto").hide();
                        $("#btnFillDateUnit").hide();
                        $("#btnFillAutobyDirection").hide();
                        $("#btnFillGrowth").hide();
                        $("#btnFillLinear").hide();
                        break;
                }
            });
            $("#btnFillAuto").click(function() {
                var startRange = getRange($("#startRange").val());
                var wholeRange = getRange($("#wholeRange").val());
                var sheet = spread.getActiveSheet();
                sheet.fillAuto(startRange, wholeRange, parseInt($("#fillSeries").val()));
            });
            $("#btnFillAutobyDirection").click(function() {
                var startRange = getRange($("#startRange").val());
                var wholeRange = getRange($("#wholeRange").val());
                var sheet = spread.getActiveSheet();
                sheet.fillAutobyDirection(startRange, wholeRange, parseInt($("#fillDirection").val()));
            });
            $("#btnFillLinear").click(function() {
                var startRange = getRange($("#startRange").val());
                var wholeRange = getRange($("#wholeRange").val());
                var sheet = spread.getActiveSheet();
                var step = parseInt($("#step").val());
                var stop = parseInt($("#stop").val());
                sheet.fillLinear(startRange, wholeRange, parseInt($("#fillSeries").val()), step, stop);
            });
            $("#btnFillGrowth").click(function() {
                var startRange = getRange($("#startRange").val());
                var wholeRange = getRange($("#wholeRange").val());
                var sheet = spread.getActiveSheet();
                var step = parseInt($("#step").val());
                var stop = parseInt($("#stop").val());
                sheet.fillGrowth(startRange, wholeRange, parseInt($("#fillSeries").val()), step, stop);
            });
            $("#btnFillDate").click(function() {
                var startRange = getRange($("#startRange").val());
                var wholeRange = getRange($("#wholeRange").val());
                var sheet = spread.getActiveSheet();
                var step = parseInt($("#step").val());
                var stop = null;
                if ($("#stop").val() !== '') {
                    stop = new Date($("#stop").val());
                }
                sheet.fillDate(startRange, wholeRange, parseInt($("#fillSeries").val()), parseInt($("#fillDateUnit").val()), step, stop);
            });
        };

        function getRange(rangeString) {
            var rangeArray = rangeString.split(',');
            var range = new spreadNS.Range(parseInt(rangeArray[0]), parseInt(rangeArray[1]), parseInt(rangeArray[2]), parseInt(rangeArray[3]));
            return range;
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 400px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label for="startRange">Start Range</label>
                <input type="text" id="startRange" placeholder="0, 0, 1, 1" />
                <label for="wholeRange">Whole Range</label>
                <input type="text" id="wholeRange" placeholder="0, 0, 7, 1" />
            </div>
            <div class="option-row">
                <label>Fill Methods</label>
                <select id="fillMethods">
                    <option value='0' selected>fillAuto</option>
                    <option value='1'>fillAutobyDirection</option>
                    <option value='2'>fillLinear</option>
                    <option value='3'>fillGrowth</option>
                    <option value='4'>fillDate</option>
                </select>
            </div>
            <div class="option-row">
                <div id="fillSeriesSet">
                    <label>FillSeries</label>
                    <select id="fillSeries">
                        <option value='0' selected>Column</option>
                        <option value='1'>Row</option>
                    </select>
                </div>
                <div id="fillDirectionSet">
                    <label>FillDirection</label>
                    <select id="fillDirection">
                        <option value='0' selected>Left</option>
                        <option value='1'>Right</option>
                        <option value='2'>Up</option>
                        <option value='3'>Down</option>
                    </select>
                </div>
            </div>
            <div class="option-row" id="fillDateUnitSet">
                <label>FillDateUnit</label>
                <select id="fillDateUnit">
                    <option value='0' selected>Day</option>
                    <option value='1'>Weekday</option>
                    <option value='2'>Month</option>
                    <option value='3'>Year</option>
                </select>
            </div>
            <div class="option-row" id="fillStepAndStop">
                <label>Step</label>
                <input type="text" id="step" />
                <label>Stop</label>
                <input type="text" id="stop" />
            </div>
            <div class="option-row">
                <label></label>
                <input type="button" id="btnFillAuto" value="fillAuto" />
                <input type="button" id="btnFillAutobyDirection" value="fillAutobyDirection" />
                <input type="button" id="btnFillLinear" value="fillLinear" />
                <input type="button" id="btnFillGrowth" value="fillGrowth" />
                <input type="button" id="btnFillDate" value="fillDate" />
            </div>
        </div>
    </div>
</body>
</html>
